<template>
  <el-container class="container_left">
    <el-button @click="data.dialogVisible.visible = true" class="chat_btn"
      >新建知识库</el-button
    >
    <ul class="infinite-list" style="overflow: auto">
      <li
        v-for="item in kbList"
        :key="item.id"
        class="infinite-list-item"
        :class="{ active: activeId === item.id }"
        @mouseenter="showDropdown(item.id)"
        @mouseleave="hideDropdown(item.id)"
        @click="jumpToKnowledge(item.id)"
      >
        <span class="infinite-list-i">{{ item.kb_name }}</span>
        <el-dropdown
          v-show="dropdownVisible[item.id]"
          @command="handleCommand"
          class="infinite-list-i"
        >
          <span class="el-dropdown-link">
            <el-icon><MoreFilled /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu v-show="dropdownVisible[item.id]">
              <el-dropdown-item command="Delete">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </li>
    </ul>
    <el-popconfirm
      width="200"
      confirm-button-text="是"
      cancel-button-text="否"
      title="确认清空聊天记录吗 ?"
      @confirm="confirmEvent"
    >
    <!--  <template #reference>
        <el-button class="clear_chat_btn">清空知识库</el-button>
      </template>-->
    </el-popconfirm>
  </el-container>
  <!-- 配值弹窗 -->
  <el-dialog
    @update:visible="handleVisibleUpdate"
    :model-value="data.dialogVisible.visible"
    title="新建知识库"
    style="width: 600px; height: 20vh"
    draggable
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
      <el-form-item label="知识库名称" prop="kb_name">
        <el-input v-model="form.kb_name" placeholder="请输入知识库名称" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel" style="margin-right: 10px"
          >取消</el-button
        >
        <el-button type="primary" @click="handleSubmit">提交</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { Ref, inject, reactive, ref, watch, onMounted } from "vue";
import {
  Location,
  Postcard,
  Setting,
  Document,
  User,
  MoreFilled,
} from "@element-plus/icons-vue";
import { local } from "@/utils/storage";
import Dialog from "@/components/Dialog.vue";
import { KnowledgeApi } from "@/api/api";
import { KnowledgeBaseRes, CreateKbResponse } from "@/api/knowledge.ts";
import { IStore } from "@/App.vue";
import { useRouter,useRoute } from "vue-router";
interface DropdownVisible {
  [key: number]: boolean;
}
const router = useRouter();
const route = useRoute();
// 引入全局信息
const store = inject<IStore>("store");
// 当前id
const activeId = ref<number | null>(null);
// 表单数据
const form = reactive({
  kb_name: "", // 知识库名称
});
const kbList = ref([]);
// 表单验证规则
const rules = reactive({
  kb_name: [
    { required: true, message: "请输入知识库名称", trigger: "blur" },
    {
      min: 2,
      max: 50,
      message: "名称长度应在 2 到 50 个字符之间",
      trigger: "blur",
    },
  ],
});
// 获取弹窗状态
const formRef = ref();
const dropdownVisible: Ref<DropdownVisible> = ref({});

const data = reactive({
  // 弹窗状态
  dialogVisible: {
    visible: false,
  },
  // 修改信息弹窗
  editInfoDialog: {
    visible: false,
  },
  //修改loading
  editLoading: false,
});
// 跳转到其他页面
const jumpToKnowledge = (id: number) => {
  activeId.value = id;
  router.push({
    name: "KnowledgeDetail",
    params: { id },
    query: { t: Date.now() }, // 可选：添加时间戳避免缓存
  });
};
// 新建知识库
// const addKBBase=()=>{
//   data.dialogVisible.visible = false; // 关闭弹窗
// }
// 获取所有知识库操作
const getAllKbList = async () => {
  const { data } = await KnowledgeApi.getAllKnowledgeData();
  // 如果返回的数据在 res.data 里
  if (data && data.knowledge_bases) {
    kbList.value = data.knowledge_bases;
  } else {
    console.error("未能获取到正确的知识库列表！");
  }
};
const load = () => {
  count.value += 2;
};
// 取消操作
const handleCancel = () => {
  form.kb_name = ""; // 清空输入框
  data.dialogVisible.visible = false; // 关闭弹窗
};

// 提交表单
const handleSubmit = async () => {
  const valid = await formRef.value?.validate();
  if (valid) {
    // 提交知识库数据
    console.log("提交的知识库名称:", form.kb_name);
    const res = await KnowledgeApi.createKnowledgeBase({
      kb_name: form.kb_name,
    });
    ElMessage.success("新增知识库成功");
    getAllKbList();
    data.dialogVisible.visible = false; // 提交后关闭弹窗
  }
};

// 获取修改组件回传的状态值
const handleUserinfoEdit = (visible: boolean) => {
  data.editInfoDialog.visible = visible;
};

// 确认清空聊天记录
const confirmEvent = () => {
  console.log("confirm!");
  count.value = 0;
};

// 显示单个聊天的下拉
const showDropdown = (i: number) => {
  dropdownVisible.value[i] = true;
};

const hideDropdown = (i: number) => {
  dropdownVisible.value[i] = false;
};

const handleCommand = (command: string) => {
  if (command === "delete") {
    // Handle delete action
  }
};
onMounted(() => {
  const idFromRoute = router.currentRoute.value.params.id;
  getAllKbList().then(() => {
    if (idFromRoute) {
      activeId.value = Number(idFromRoute);
    }
  });
});
// 监听修改弹窗状态
watch(() => data.editInfoDialog.visible,
);
watch(
  () => route.params.id,
  (newId) => {
    if (newId) {
      activeId.value = Number(newId);
    }
  }
);
</script>
<style lang="less" scoped>
/* 设置垂直滚动条 */
::-webkit-scrollbar {
  width: 6px; /* 滚动条宽度 */
}

/* 设置滚动条轨道（背景） */
::-webkit-scrollbar-track {
  background: #fafafa; /* 滚动条轨道背景色 */
  border-radius: 5px; /* 圆角 */
}

/* 设置滚动条滑块 */
::-webkit-scrollbar-thumb {
  background: #fafafa; /* 滚动条滑块颜色 */
  border-radius: 5px; /* 圆角 */
}

// /* 滑块在鼠标悬停时的样式 */
// ::-webkit-scrollbar-thumb:hover {
//   background: #888; /* 滚动条滑块颜色 */
// }

.container_left {
  width: 100%;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  // background-color: whitesmoke;
  border-right: 1px solid #e5e7eb;
  position: relative;
  overflow: hidden;
  .el-button {
    height: 35px;
    line-height: 35px;
  }
  .chat_btn {
    width: 225px;
    border: 1px dashed #abc;
  }

  .infinite-list {
    height: 90%;
    width: 238px;
    padding: 0;
    margin: 0;
    list-style: none;
    margin-top: 15px;
  }
  /* 鼠标放到整个容器时改变滚动条样式 */
  .infinite-list:hover::-webkit-scrollbar-thumb {
    background-color: #e5e7eb; /* 滚动条 thumb 背景颜色 */
  }
  /* 鼠标滑到滚动条上时的样式 */
  .infinite-list:hover::-webkit-scrollbar-thumb:hover {
    background-color: #888; /* 滑块悬停颜色 */
  }
  .infinite-list-item.active {
    background-color: #409eff; /* 激活背景色（Element Plus 主色调） */
    color: #fff; /* 激活时字体颜色为白色 */
    border: 1px solid #409eff; /* 激活边框 */
    border-radius: 4px; /* 圆角效果 */
  }
  .infinite-list .infinite-list-item {
    width: 225px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
    padding: 12px;
    border-radius: 6px;
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    .infinite-list-i {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .infinite-list-item:hover {
    border: 1px solid #409eff;
  }
  .infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
  }
  .clear_chat_btn {
    width: 225px;
    margin-top: 26px;
    border: 1px dashed #abc;
  }
  .avatar {
    width: 100%;
    height: 72px;
    border-top: 1px solid #abc;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 16px;
    overflow: hidden;
    box-sizing: border-box;
    .username {
      width: 150px;
      // border: 1px solid red;
      margin: 0 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon {
      width: 40px;
      height: 36px;
      cursor: pointer;
    }
    .icon:hover {
      background-color: #e5e7eb;
      border-radius: 20px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 设置阴影 */
    }
  }
}
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}
.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
.login-form-container {
  /* 根据需要设置登录表单的样式 */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  .login-form {
    margin-top: 20px;
    .btn_style {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
    .el-input {
      width: 245px;
    }
    .el-button {
      width: 23%;
      margin-top: 10px;
    }
  }
}
</style>
